<!DOCTYPE html>
<html>
<head>
	<title>iOS and Js</title>
	<style type="text/css">
	  * {
	  	font-size: 40px;
	  }
	</style>
</head>

<body>
  
<div style="margin-top: 100px">
	<h1>Test how to use objective-c call js</h1><br/>
	<div><input type="button" value="call js alert" onclick="callJsAlert()"></div>
    <br/>
	<div><input type="button" value="Call js confirm" onclick="callJsConfirm()"></div><br/>
</div>
<br/>
<div>
	<div><input type="button" value="Call Js prompt " onclick="callJsInput()"></div><br/>
  <div><input type="button" value="Swift inject js" onclick="showAlert()"></div><br/>
  <div>Click me here: <a href="http://www.baidu.com">Jump to Baidu</a></div>
</div>

<br/>
<div id="SwiftDiv">
	<span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
</div>

<script type="text/javascript">
   function callJsAlert() {
   	alert('Objective-C call js to show alert');
    
    window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});
   }

function callJsConfirm() {
  if (confirm('confirm', 'Objective-C call js to show confirm')) {
    document.getElementById('jsParamFuncSpan').innerHTML
    = 'true';
  } else {
    document.getElementById('jsParamFuncSpan').innerHTML
    = 'false';
  }
  
  window.webkit.messageHandlers.AppModel.postMessage({body: 'call js confirm in js'});
}

function callJsInput() {
  var response = prompt('Hello', 'Please input your name:');
  document.getElementById('jsParamFuncSpan').innerHTML = response;
  
  window.webkit.messageHandlers.AppModel.postMessage({body: response});
}

// 注意哦，如果JS写错，可能在OC调用JS方法时，都会出错哦。
var jsParamFunc = function(argument) {
  document.getElementById('jsParamFuncSpan').innerHTML
  = argument['name'];
}
showAler();
</script>
</body>
</html>